<template>
	<view style="min-height:100vh">
		<navbar :scrollTop="scrollY" :isLove="isLove" @collect="toCollect"
			:location="{latitude:dataform.latitude,longitude:dataform.longitude,distance:kmUnit(dataform.distance)}">
		</navbar>
		<view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-with-animation="true"
				:style="'height:' + height + 'px;'" @scroll="scroll" @scrolltolower="lower">

				<VerticalDanmu :messages="message">
					<!-- 轮播 -->
					<productBg :images="dataform.shopfrontPhoto?dataform.shopfrontPhoto.split(','):[]"
						:isUp="dataform.isUp" @initImg="initImg" :code="dataform.id" :updateTime="dataform.updateTime"
						@catImg="catImg" :autoplay="true"></productBg>
				</VerticalDanmu>
				<!-- 标题 区域 -->
				<view class="product-info mb-24">
					<!-- 标题 -->
					<view class="acea-row row-middle row-between title-box">
						<view class="title line2">
							<!-- <view class="red-tag">好铺优选</view> -->
							<view class="title-text-i line2">
								{{ dataform.status == '0'  ? '出租' : (dataform.status == '1' ? '出售' : '转让') }} 丨
								{{ dataform.title }}
							</view>
						</view>
						<view class="acea-row row-middle row-between share-btns">
							<button open-type="share">
								<image src="../static/images/wechat_icon.png" mode=""></image>
								<view style="font-size: 23rpx;">微信</view>

							</button>
							<button @click="toReport">
								<image src="../static/images/report_icon.png" mode=""></image>
								<view style="font-size: 23rpx;">举报</view>
							</button>
						</view>
					</view>
					<!-- 浏览、咨询统计 -->
					<view class="acea-row row-middle row-between visit-box border-b">
						<view class="visit-advtar" @click="toVisitor">
							<image :src="m.avatar" mode=""
								v-for="(m,ind) in dataform.managementResponse?dataform.managementResponse:[]" :key="ind"
								:style="{left: (20 * ind) + 'rpx'}"></image>
						</view>
						<view class="acea-row row-middle row-between visit-l">
							<view class="visit-num" @click="toVisitor">{{dataform.view?dataform.view:0}}人浏览</view>
							<view class="visit-num">
								{{dataform.communication && dataform.communication!= 0 ?dataform.communication: communicationRandom}}人咨询
							</view>
							<!-- <view class="visit-num" @click="toMatchPage" style="color: red;">信息匹配({{matchTotal}})</view> -->
						</view>
						<view style="margin-top: 28rpx;">
							<u-alert v-if="matchTotal > 0" :title="'已为这条信息找到 '+matchTotal+' 个感兴趣的人，点击查看详情！'"
								@click="toMatchPage" type="error"></u-alert>
						</view>
					</view>
					<!-- 面积  租金 -->
					<view class="acea-row row-middle row-between shop-area">
						<view class="">
							<view class="red-bold-txt">{{ dataform.bvileAvea?Number(dataform.bvileAvea) : 0 }}<text
									class="red-bold-txt-s">m²</text></view>
							<view class="gray-txt">产权面积</view>
						</view>
						<view class="" v-if="dataform.status != 1">
							<view class="red-bold-txt">{{ dataform.avea?  Number(dataform.avea) : 0 }}<text
									class="red-bold-txt-s">m²</text>
							</view>
							<view class="gray-txt">使用面积</view>
						</view>
						<block v-if="dataform.status == 1">
							<view class="">
								<view class="red-bold-txt">
									{{ Number(dataform.salemoney) || 0 }} 元/㎡
									<text class="red-nomarl-txt"></text>
								</view>
								<view class="gray-txt">单价</view>
							</view>
							<view class="">
								<view class="red-bold-txt">
									{{ isNullFiled(dataform.isSell,'面议',(dataform.sellOunt&&dataform.sellOunt!=0?( Number(dataform.sellOunt)>10000?Number(dataform.sellOunt)/10000 +'万元':Number(dataform.sellOunt)+'元'):'面议')) }}
								</view>
								<view class="gray-txt">总价</view>
							</view>
							<view class="" v-if="dataform.status == 1 ">
								<view class="red-bold-txt">
									{{ dataform.returnInvestment?dataform.returnInvestment+'%':''}}
								</view>
								<view class="gray-txt">投资回报率</view>
							</view>
						</block>
						<block v-else>
							<view class="">
								<view class="red-bold-txt">
									{{ isNullFiled(dataform.isFace == 1 ,'面议',(dataform.rent&&dataform.rent!=0?(Number(dataform.rent)+'元/月'):'面议')) }}
									<text class="red-nomarl-txt"></text>
								</view>
								<view class="gray-txt">月租金</view>
							</view>
							<view class="">
								<view class="red-bold-txt">
									{{ isNullFiled(dataform.transferStatus,'面议',(dataform.transferFee&&dataform.transferFee!=1?(Number(dataform.transferFee)+'万元'):'面议')) }}
								</view>
								<view class="gray-txt">转让费</view>
							</view>
						</block>
					</view>
					<!-- 地址 -->
					<view class="acea-row row-top row-between address">
						<view class="address-l line2">{{ dataform.addres || '--' }}</view>
						<view class="acea-row row-middle distance" @click="toLocation">

							<image src="../static/images/red_location.png" mode=""></image>
							<view>{{kmUnit(dataform.distance)}}</view>
							<view class="acea-row row-between" style="margin-left: 10rpx"><text
									style="line-height: 9px;">导航</text><u-icon name="arrow-right" size="12px"></u-icon>
							</view>
						</view>
					</view>
					<!-- 优势 -->
					<view class="acea-row advantage-box">
						<text>优势：</text>
						<text class="advantage" v-for="item in dataform.storeAdvantage" :key="item">{{ item }}</text>
					</view>
					<!-- 适合场所 -->
					<view class="suitable-box" v-if="dataform.workingGroup&&dataform.workingGroup.length>0">
						<text>适合：</text>
						<text class="suitable"
							v-for="item in (dataform.workingGroupName?dataform.workingGroupName.replaceAll('/',',').split(','):[])"
							:key="item">{{ item }}</text>
					</view>
				</view>

				<!-- 悬赏任务 -->
				<view class="task-box white-bg mb-24" v-if="rewardList.length>0">
					<view class="acea-row row-middle row-between task-title mb-24" @click="toReward">
						<view class="title-l line2">本信息已参与赏金任务，快来一起分享领赏金吧!</view>
						<view class="jiantou">
							<image src="../static/images/cir_right.png" mode=""></image>
						</view>
					</view>
					<view class="task-list">
						<view class="task-item mb-24" v-for="item in rewardList" :key="item.id"
							@click="toReawrdDetail(item)">
							<view class="acea-row row-top row-between item-top">
								<view class="task-tit line2">
									<!-- 	{{ dataform.status == '0'  ? '出租' : (dataform.status == '1' ? '出售' : '转让') }} |
									{{ item.generalization }} | {{ item.avea || 0 }}㎡ | {{ item.rent || 0 }}元/㎡ -->
									{{'悬赏'+( item.rewardAmount?Number(item.rewardAmount) +'元' : '') +  item.managementResponse.title}}
								</view>
								<view class="task-tit-l">
									<view v-if="dataform.status == 1">已完成</view>
									<view v-else>
										{{taskStatus[dataform.rewardStatus]|| dataform.rewardStatus == 0? taskStatus[dataform.rewardStatus]:'未领取'}}
									</view>
									<view>（已{{ dataform.num || 0 }}人领）</view>
								</view>
							</view>
							<view class="acea-row row-bottom row-between item-bottom" style="background: none;">
								<view class="share-list">
									<view class="share-item">
										分享赚1: <text>现金{{ item.rewardAmount || 0 }}元</text>
										（{{ item.rewardTask == 0 ? '暂未' : '已' }}托管平台）
									</view>
									<view class="share-item">
										分享赚2: <text>价值{{ item.coin || 0}}元(金币)</text>
										<!-- ,剩余184(金币) -->
									</view>
								</view>
								<view class="item-bottom-btn">任务详情</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 商铺详情 -->
				<view class="module-box white-bg mb-24">
					<view class="module-title">商铺详情</view>
					<view class="acea-row row-middle row-between pd-t-b-24"> 
						<view class="acea-row row-middle w-48">
							<view class="label">当前经营</view>
							<view class="text">{{ dataform.groupCurrentName || '--'}}</view>
						</view>
						<view class="acea-row row-middle w-48">
							<view class="label">类型</view>
							<view class="text">{{ dataform.storeCategoryName|| '--' }}</view>
						</view>
					</view>
					<view class="acea-row row-middle row-between pd-t-b-24" v-if="dataform.modePaymentName">
						<view class="label">付款方式</view>
						<view class="text">{{ dataform.modePaymentName|| '--' }} </view>
					</view>
					<view class="acea-row row-middle row-between pd-t-b-24">
						<view class="label">门面数据</view>
						<view class="acea-row row-middle row-between shop-data">
							<view class="data">
								<view class="gray-txt">门宽</view>
								<view class="black-txt">{{ dataform.kaijian|| 0 }}m</view>
							</view>
							<view class="data">
								<view class="gray-txt">进深</view>
								<view class="black-txt">{{ dataform.jianshen|| 0 }}m</view>
							</view>
							<view class="data">
								<view class="gray-txt">层高</view>
								<view class="black-txt">{{ dataform.cenggao || 0}}m</view>
							</view>
							<view class="data">
								<view class="gray-txt">楼层/层数</view>
								<view class="black-txt">{{ dataform.floor?dataform.floor.split(',').join('/') : "1/1" }}
								</view>
							</view>
						</view>
					</view>
					<view class="acea-row row-top row-between pd-t-b-24 border-b">
						<view class="label">配套设施</view>
						<view class="acea-row matching-list">
							<view class="matching" v-for="(item,index) in dataform.supportingFacilityName" :key="index">
								<image :src="item.image" mode=""></image>
								<view class="name line1">{{item.name}}</view>
							</view>
						</view>
					</view>
					<view class="supplement pd-t-b-24">
						<view class="label">补充说明</view>
						<view class="text pd-t-b-24" style="width: 100%;">
							{{ dataform.details || ''}}
						</view>
					</view>
				</view>


				<u-collapse @change="collapseChange" @open="collapseOpen">
					<u-collapse-item title="周边分析" name="zb">
						<view>
							<!-- 周边分析 -->
							<view class="module-box analysis white-bg mb-24">
								<view class="acea-row row-middle row-between pd-t-b-24">
									<view class="module-title">周边分析</view>
									<view class="title-r-gray">
										采集1公里内数据
									</view>
								</view>
								<!-- 图表 -->
								<view class="echarts-box">
									<qiun-data-charts type="radar" :chartData="radarChartData" :opts="radarChartOpts" />
								</view>
								<view class="analysis-data">
									<view class="acea-row row-middle pd-t-b-24">
										<view class="analysis-data-l">
											常住人口生意
										</view>
										<view class="acea-row row-between analysis-data-box" @click="toZbList('小区')">
											<view class="acea-row row-middle">
												<image src="../static/images/rim_01.png"></image>
												<view>小区</view>
											</view>
											<view>{{zbData['小区'] || 0}}个</view>
										</view>
										<view class="acea-row row-between analysis-data-box" @click="toZbList('学校')">
											<view class="acea-row row-middle">
												<image src="../static/images/rim_02.png"></image>
												<view>学校</view>
											</view>
											<view>{{zbData['学校'] || 0}}个</view>
										</view>
									</view>
									<view class="acea-row row-middle pd-t-b-24">
										<view class="analysis-data-l">
											流动人口生意
										</view>
										<view class="acea-row row-between analysis-data-box" @click="toZbList('地铁站')">
											<view class="acea-row row-middle">
												<image src="../static/images/rim_03.png"></image>
												<view>地铁站</view>
											</view>
											<view>{{zbData['地铁站'] || 0}}个</view>
										</view>
										<view class="acea-row row-between analysis-data-box" @click="toZbList('公交站')">
											<view class="acea-row row-middle">
												<image src="../static/images/rim_04.png"></image>
												<view>公交站</view>
											</view>
											<view>{{zbData['公交站'] || 0}}个</view>
										</view>
									</view>
									<view class="acea-row row-middle pd-t-b-24">
										<view class="analysis-data-l">
											商务人口生意
										</view>
										<view class="acea-row row-between analysis-data-box" @click="toZbList('写字楼')">
											<view class="acea-row row-middle">
												<image src="../static/images/rim_05.png"></image>
												<view>写字楼</view>
											</view>
											<view>{{zbData['写字楼'] || 0}}个</view>
										</view>
									</view>
								</view>
							</view>
						</view>

					</u-collapse-item>
					<u-collapse-item title="消费能力" name="jz">
						<view>
							<!-- 消费能力 -->
							<view class="module-box white-bg mb-24">
								<view class="module-title pd-t-b-24">
									消费能力
								</view>
								<view class="pd-t-b-24 border-b contrast">
									<view class="contrast-title">
										参考一：房价对比
									</view>
									<view class="acea-row row-middle row-between pd-t-b-24">
										<view class="label-c">周边均价</view>
										<view class="progress-bg">
											<view class="progress-line-r"
												:style="{width:housingPrice.ratePrice?(Number(housingPrice.ratePrice)/200)+'%' : 0 +'%'}">
											</view>
										</view>
										<view class="label-c">
											{{ housingPrice.ratePrice?parseInt(housingPrice.ratePrice)  : 0}}<text>元/m²</text>
										</view>
									</view>
									<view class="acea-row row-middle row-between pd-t-b-24">
										<view class="label-c">城市均价</view>
										<view class="progress-bg">
											<view class="progress-line-y"
												:style="{width:housingPrice.cityRatePrice?(parseInt(housingPrice.cityRatePrice)/200)+'%' : 0 +'%'}">
											</view>
										</view>
										<view class="label-c">
											{{housingPrice.cityRatePrice?parseInt(housingPrice.cityRatePrice): 0}}<text>元/m²</text>
										</view>
									</view>
								</view>
								<view class="pd-t-b-24 contrast">
									<view class="contrast-title">
										参考二：人均消费餐饮对比
									</view>
									<view class="acea-row row-middle row-between pd-t-b-24">
										<view class="label-c">周边均价</view>
										<view class="progress-bg">
											<view class="progress-line-r"
												:style="{width:consumption.capItaPrice?(parseInt(consumption.capItaPrice)/2)+'%' : 0 +'%'}">
											</view>
										</view>
										<view class="label-c">
											{{consumption.capItaPrice?parseInt(consumption.capItaPrice): 0}}<text>元</text>
										</view>
									</view>
									<view class="acea-row row-middle row-between pd-t-b-24">
										<view class="label-c">城市均价</view>
										<view class="progress-bg">
											<view class="progress-line-y"
												:style="{width:consumption.cityItaPrice?(parseInt(consumption.capItaPrice)/2)+'%' : 0 +'%'}">
											</view>
										</view>
										<view class="label-c">
											{{consumption.cityItaPrice?parseInt(consumption.cityItaPrice): 0}}<text>元</text>
										</view>
									</view>
								</view>
							</view>
							<!-- 附近竞争对手 -->
							<view class="module-box white-bg mb-24" >
								<view class="acea-row row-middle row-between">
									<view class="pd-t-b-24 module-title">附近竞争对手</view>
									<view class="title-r-gray-s">单位：家</view>
								</view>
								<view class="opponent-echarts">
									<qiun-data-charts type="column" :chartData="columnChartData" :opts="columnChartOpts"
										@getIndex="getIndex" />
								</view>
							</view>
						</view>

					</u-collapse-item>
				</u-collapse>

				<!-- 联系人 -->
				<view class="module-box white-bg mb-24">
					<contacts-list :list="dataform.contacts" @toPhone="toPhone" :info="dataform"></contacts-list>
				</view>
				<!-- 商家服务 -->
				<!-- 				<view class="module-box white-bg mb-24">
					<view class="acea-row row-middle row-between">
						<view class="module-title">商家服务</view>
						<view class="title-btn">点击预约</view>
					</view>
					<view class="pd-t-b-24">
						<view class="service-list">
							<view class="service-item" v-for="(item,index) in supplyList" :key="index"
								@click="toPages('/pages/others/merchantServiceList/merchantServiceList?index='+index)">
								<image :src="item.icon" mode=""></image>
								<view>{{item.name}}</view>
							</view>
						</view>
					</view>
				</view> -->
				<!-- 推荐 -->
				<view class="goods">
					<view class="acea-row row-between goods-top">
						<view class="acea-row row-middle tabs">
							<view :class="['tab',goodsTabOn==index?'tab-on':'']" v-for="(item,index) in goodsTab"
								:key="index" @click="changeRecommed(index)">{{item}}</view>
						</view>
						<!-- <view class="shop-btn">
							金币商城
						</view>	 -->
					</view>
					<recommend :list="nearbyList"></recommend>
				</view>
				<view class='loadingicon acea-row row-center row-middle' @click="toMore">
					<text class='loading iconfont icon-jiazai' :hidden='loading'></text>{{loadTitle}}
				</view>
				<view class="uni-p-b-98"></view>
			</scroll-view>
		</view>
		<u-popup :show="zbshow" @close="close" mode="right"
			:customStyle="{width :'300px',zIndex:99999999999999999999999}" class="call-popup popup-show">
			<view class="acea-row row-top row-between item zblIST">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="zbLower"
					@touchmove.stop.prevent="() => {}">
					<view class="scroll-view-item uni-bg-red" v-for="(item,index) in zbList">
						<view class="item_title">{{ item.title }}</view>
						<view class="info">距离：{{ kmUnit(item._distance)}}</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<report :link-id="dataform.id" :types="types" ref="report" />
		<detail-footer :contact="dataform" @toPhone="toPhone" @toCollect="toCollect" :info="dataform"></detail-footer>
		<countDown ref="countDown" />
		<slide-nav />
	</view>
</template>

<script>
	import navbar from '../components/navbar/navbar.vue'
	import detailFooter from '../components/footer/footer.vue'
	import contactsList from '../components/contactsList/contactsList.vue'
	import recommend from '../components/recommend/recommend.vue'
	import productBg from '../components/productBg/productBg.vue'
	import report from "@/pages/details/components/goods_report/report.vue"
	import VerticalDanmu from '@/pages/details/components/VerticalDanmu/index.vue'
	import countDown from '@/pages/details/components/countDown.vue'
	import {
		getRecommend,
		getZb,
		HomePagePeripheral,
		RecommendToYou
	} from '@/api/api.js'
	import {
		mapGetters
	} from "vuex";
	import {
		radarChartData,
		radarChartOpts
	} from '../static/echarts.js'
	import {
		getTypeApi
	} from '@/api/api.js'
	import {
		ShopRentDetailApi,
	} from '@/api/subletOfShop.js'
	import {
		RewardListApi
	} from '@/api/reward.js'
	import matchMixins from '@/mixins/match.js'
	import qiunDataCharts from "../components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
	let app = getApp();
	export default {
		components: {
			navbar,
			detailFooter,
			contactsList,
			recommend,
			productBg,
			qiunDataCharts,
			report,
			VerticalDanmu,
			countDown
		},
		mixins: [matchMixins],
		computed: {
			...mapGetters(['isLogin']),
		},
		data() {
			return {
				zgShowaa: false,
				zbShowaa: false,
				scrollY: 0,
				scrollTop: 0,
				isLove: false,
				zbshow: false,
				isZhoubian: false,
				isJingzheng: false,
				conllapseValue: [],

				communicationRandom: (Math.floor(Math.random() * (500 - 50 + 1)) + 50),
				menu: [{
					name: '商铺详情',
					type: 0
				}, {
					name: '客流来源',
					type: 1
				}, {
					name: '消费能力',
					type: 2
				}, {
					name: '竞争对手',
					type: 3
				}, {
					name: '商家服务',
					type: 4
				}],
				height: 0,
				message: [],
				opacity: 0,
				goodsTabOn: 0,
				goodsTab: ['为你推荐', '附近推荐'],
				goodsList: [1, 2],
				matching: {
					'停车位': '../static/images/matching_01.png',
					'天然气': '../static/images/matching_02.png',
					'网络': '../static/images/matching_03.png',
					'上水': '../static/images/matching_04.png',
					'烟道': '../static/images/matching_05.png',
					'排污': '../static/images/matching_06.png',
					'可明火': '../static/images/matching_07.png',
					'下水': '../static/images/matching_08.png',
					'电380V': '../static/images/matching_09.png',
					'管煤': '../static/images/matching_10.png',
					'供暖': '../static/images/matching_11.png',
					'外摆区': '../static/images/matching_12.png',
				},
				housingPrice: {},

				zbList: [],
				consumption: {},
				radarChartData: {
					categories: [],
					series: []
				},
				rewardList: [], //悬赏列表
				supplyList: [], //商家服务列表
				nearbyList: [], //附近店铺
				radarChartOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: false,
					enableScroll: false,
					title: {
						offsetY: '50',
						offsetX: '50',
						name: '本铺'
					},
					legend: {
						show: false,
						position: "right",
						lineHeight: 25
					},
					extra: {
						radar: {
							gridType: "circle",
							gridColor: "#CCCCCC",
							gridCount: 5,
							opacity: 0.2,
							max: 50,
							labelShow: true,
							radius: 90,
							labelColor: '#e6251d'
						}
					}
				},
				columnChartData: {
					categories: [],
					series: [{
						name: "数量",
						data: []
					}]
				},
				columnChartOpts: {
					color: ["#fc2837", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 10, 5],
					enableScroll: false,
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true,
						rotateLabel: true,
						marginTop: 10
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 16,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				dataform: {},
				nearPage: 1,
				totalNearPage: 1,
				loading: true,
				loadTitle: '我也是有底线的',
				curId: 0,
				rk: '',
				types: '',
				zbData: {},
				zbDatas: {},
				openKey: '',
				zbPage: 1,
				bhv: [],
				matchTotal: 0,
				taskStatus: {
					0: "未领取",
					1: "任务进行中",
					2: "已完成"
				},
				shareInfo: {
					title: "",
					infoId: "",
					shareId: "",
					infoType: 1,
					isInitStatus: 0
				},
				detailInfo: {
					type: '',
					st: '',
					storeCategory: ''
				},
				rewardTitle: '',
				isReward: 0,
				mind: 0,
			};
		},
		onReachBottom() {
			this.nearPage++;
			console.log("this.goodsTabOn", this.goodsTabOn)
			this.getNearbyList(this.goodsTabOn);
		},
		onShow() {
			this.$nextTick(() => {
				//console.log("this.$location", this.$location)
				this.toDetail();
			})


		},
		onLoad(options) {
			if (!options.id) return uni.navigateBack()
			if (options.rk) {
				this.rk = options.rk
			}
			this.mind = options.mind ? options.mind : this.mind
			if (options.types) {
				this.types = options.types

			}
			this.isReward = options.isReward;
			if (this.isReward) {
				this.rewardTitle = options.rewardTitle
			}
			let that = this;
			that.curId = options.id;
			that.detailInfo.st = options.st;
			that.detailInfo.storeCategory = options.storeCategory;
			uni.getSystemInfo({
				success: function(res) {
					that.height = res.windowHeight;
				}
			});
			if (options.spread) {
				this.shareInfo.shareId = options.spread
			}
			// this.getList(options.id);
			// this.getRewardUserApi(options.id);
			// this.getSupplyList();
			// this.getNearbyList();

		},
		methods: {
			isNullFiled: getApp().globalData.isNullFiled,
			toVisitor() {
				if (this.dataform.status == 1) {
					this.dataform.vistype = 8
				}
				uni.navigateTo({
					url: "/pages/aboutUsers/aboutUsers/visitor?mind=" + this.mind + "&data=" + JSON.stringify(
						this.dataform)
				})
			},
			toMatchPage() {
				uni.navigateTo({
					url: "/pages/aboutUsers/aboutUsers/match?data=" + JSON.stringify(
						this.dataform)
				})
			},
			toMore(){
				this.nearPage++;
				this.getNearbyList(this.goodsTabOn);
			},
			toDetail() {
				// if (this.$location && this.$location.latitude && this.$location.longitude) {
				this.getList(this.curId);
				this.getRewardUserApi(this.curId);
				this.getSupplyList();
				// this.getNearbyList();
				// } else {
				// 	setTimeout(() => {
				// 		this.toDetail();
				// 	}, 800)
				// }
			},
			kmUnit(m) {
				m = Number(m)
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m > 10000) {
						m = 0;	
					}
					if (m >= 1) {
						v = m.toFixed(2) + 'km'
					} else {
						v = (m * 1000).toFixed(2) + 'm'	
					}
				} else {	
					v = '0m'
				}
				return v;
			},
			initImg(imgArr, videArr) {
				this.shareInfo.img = imgArr[0]
			},
			toReward() {
				wx.navigateTo({
					url: '/pages/others/promotionTask/promotionTask'
				});
			},
			getHomePagePeripheral() {

				this.isZhoubian = true;
				HomePagePeripheral({
					longitude: this.dataform.longitude,
					latitude: this.dataform.latitude,
					city: this.$city
				}).then(res => {
					//console.log('res', res)
					if (res.code == 200) {
						this.columnChartData = {
							categories: [],
							series: [{
								name: "数量",
								data: []
							}]
						}
						let item = res.data;
						this.housingPrice['ratePrice'] = item.ratePrice ? item.ratePrice : 0;
						this.housingPrice['cityRatePrice'] = item.cityRatePrice ? item.cityRatePrice : 0;
						this.consumption['capItaPrice'] = item.capItaPrice ? item.capItaPrice : 0;
						this.consumption['cityItaPrice'] = item.cityItaPrice ? item.cityItaPrice : 0;
						item.per && item.per.forEach(p => {
							this.columnChartData.categories.push(p.key);
							this.columnChartData.series[0].data.push(p.num);
						})
						// 		res.data.forEach(item => {
						// 			// housingPrice  consumption

						// 			if (item.skey == 'ratePrice' || item.skey == 'cityRatePrice') {
						// 				this.housingPrice[item.skey] = item.val
						// 			} else if (item.skey == 'capItaPrice' || item.skey == 'cityItaPrice') {
						// 				this.consumption[item.skey] = item.val
						// 			} else {
						// 				//console.log(item)
						// 				this.columnChartData.categories.push(item.skey)
						// 				this.columnChartData.series[0].data.push(item.val)
						// 				// columnChartData: {
						// 				// 	categories: ["餐饮美食", "百货零售", "休闲娱乐", "培训健身", "体育健身", "社区生活", "美容美发", "宾馆酒店"],
						// 				// 	series: [{
						// 				// 		name: "数量",
						// 				// 		data: [300, 400, 186, 500, 300, 400, 168, 600]
						// 				// 	}]
						// 				// },
						// 			}
						// 		})

						this.columnChartData = JSON.parse(JSON.stringify(this.columnChartData))
						this.columnChartData = {
							...this.columnChartData
						}
					}
				})

			},
			toPhone() {
				if (this.bhv.length < 1 || this.bhv.indexOf(2) == -1) {
					this.bhv.push(2)
				}
				//console.log(this.bhv)
			},
			catImg() {
				if (this.bhv.length < 1 || this.bhv.indexOf(4) == -1) {
					this.bhv.push(4)
				}
			},
			toCollect() {
				if (this.bhv.length < 1 || this.bhv.indexOf(3) == -1) {
					this.bhv.push(3)
				}

			},
			getIndex(d1, d2, d3) {
				//console.log(d1, d2, d3)
			},
			toZbList(key) {
				this.openKey = key;
				this.zbList = this.zbDatas[key]
				//console.log(this.zbList)
				this.zbshow = true;
			},
			zbLower(e) {
				if (this.openKey) {
					this.zbPage++
					this.getZhouBian(this.openKey, this.zbPage)
				}

			},
			close() {
				this.oepnKey = "";
				this.zbPage = 1;
				this.zbList = [];
				this.zbshow = false;
			},
			lower() {
				if (this.goodsTabOn != 1 || this.totalNearPage <= this.nearPage) return
				this.loading = false
				this.nearPage += 1;
				this.getNearbyList(this.goodsTabOn)
			},
			toPages(path) {
				uni.navigateTo({
					url: path
				})
			},
			getZhouBian(key, page) {
				let params = {
					longitude: this.dataform.longitude,
					latitude: this.dataform.latitude,
				}
				if (key) {
					params.keywords = key;
					params.page = page;
				}
				this.isJingzheng = true;
				getZb(params).then(res => {
					if (res.code == 200) {
						let obj = {
							name: "数量",
							data: []
						}
						res.data.forEach(item => {
							if (key && item.key == key) {
								this.zbList = [...this.zbList, ...item.data]
								//console.log('zbList', this.zbList)
							} else {
								this.radarChartData.categories.push(item.key);
								obj.data.push(item.num)
								this.zbData[item.key] = item.num
								this.zbDatas[item.key] = item.data
							}
						})
						this.radarChartData.series.push(obj)
						this.$forceUpdate()
						//console.log("this.radarChartData", this.zbData)
						// this.zbData = res.data
					}
				})
			},
			toReawrdDetail(list) {
				uni.navigateTo({
					url: '/pages/details/offeraRreward/offeraRreward?taskId=' + list.id + '&fbInfo=' + JSON
						.stringify(list)
				})
			},
			// kmUnit(m) {
			// 	var v;
			// 	m = Number(m)
			// 	if (typeof m === 'number' && !isNaN(m)) {
			// 		if (m >= 1000) {
			// 			v = (m / 1000).toFixed(2) + 'km'
			// 		} else {
			// 			v = m.toFixed(2) + 'm'
			// 		}
			// 	} else {
			// 		v = '0m'
			// 	}
			// 	return v;
			// },
			scroll: function(e) {
				var that = this;
				let scrollY = e.detail.scrollTop < 10 ? 0 : e.detail.scrollTop;
				var opacity = scrollY / 200;
				opacity = opacity > 1 ? 1 : opacity;
				that.$set(that, 'opacity', opacity);
				that.$set(that, 'scrollY', scrollY);
			},
			//切换推荐栏
			changeRecommed(index) {
				this.goodsTabOn = index;
				this.loading = false;
				this.nearPage = 1;
				this.nearbyList = []
				// if (this.goodsTabOn != 1) return
				this.getNearbyList(index)
			},
			toLocation() {
				//console.log(this.dataform)
				let that = this;
				uni.openLocation({
					latitude: parseFloat(that.dataform.latitude),
					longitude: parseFloat(that.dataform.longitude),
					success: function() {
						//console.log('success');
						if (that.bhv.length < 1 || that.bhv.indexOf(1) == -1) {
							that.bhv.push(1)
						}
					}
				});
			},
			collapseChange(val) {
				this.conllapseValue == val;
				console.log("this.conllapseValue", val)
				setTimeout(()=>{
					val.forEach(item => {
						if (item.name == 'zb') {
							this.zgShowaa = item.status == 'open' ? true : false
						} else {
							this.zbShowaa = (item.status == 'open' ? true : false)
							
						}
					})
				},300)
				
			},
			collapseOpen(val) {
				if (!this.isJingzheng && val == 'jz') {
					this.getZhouBian();
				}
				if (!this.isZhoubian && val == 'zb') {
					this.getHomePagePeripheral();
				}


			},
			async getList(id) {
				uni.showLoading({
					title: "加载中"
				})
				try {
					let params = {
						...this.$location,
						storeCategory: this.detailInfo.storeCategory,
						status: this.detailInfo.st,
						type: 0
					}
					if (this.rk) {
						params['status'] = this.rk;
					}
					let {
						data
					} = await ShopRentDetailApi(id, params);
					data.storeAdvantage = data.storeAdvantage ? data.storeAdvantage.split('/') : [];
					data.workingGroup = data.workingGroup ? data.workingGroup.split('/') : [];
					data.shopfrontPhoto = data.shopfrontPhoto ? data.shopfrontPhoto : this.$noImageShow;
					data.supportingFacilityName = data.supportingFacilityName && data.supportingFacilityName
						.replaceAll('/', ',').split(',').map(item => {
							let data = {
								name: item
							}
							data.image = this.matching[item];

							return data
						})
					data.distance = Number(data.distance).toFixed(2)
					this.dataform = data;
					//console.log('ataform.managementResponse', this.dataform.managementResponse)
					if (this.dataform.managementResponse) {
						this.dataform.managementResponse.forEach(item => {
							this.message.push({
								content: (item.nickname ? item.nickname : '匿名') + '查看了店铺',
								avatar: item.avatar
							})
						})
					}
					if (data.askrentId) {
						this.types = 1;
					} else if (data.buystoreId) {
						this.types = 2;
					} else {
						this.types = 0;
					}
					this.shareInfo.infoId = this.dataform.id
					this.existsIsLove(this.dataform.id)
					//console.log("this.dataform --- xq", this.dataform)
					if (this.isReward == 1) {
						this.shareInfo.title = this.rewardTitle;
					} else {
						this.shareInfo.title = this.dataform.title;
					}
					this.getNearbyList(this.goodsTabOn);
					this.shareInfo.isInitStatus = 1;
					if (this.isLogin) {
						this.toMatch(this.dataform, 1, 0, d => {
							console.log("--------匹配start-------")
							console.log(d)
							if (d) {
								this.matchTotal = d.data.total;
							}
							console.log("--------匹配end-------")
						})
					}

					uni.hideLoading()
				} catch (e) {
					//console.log(e)
					//TODO handle the exception
					this.$util.Tips({
						title: e
					})
					uni.hideLoading()
				}
			},
			//获取相关悬赏列表
			async getRewardUserApi(id) {
				try {
					let {
						data
					} = await RewardListApi({
						infoId: id
					});
					this.rewardList = data.list
				} catch (e) {
					//TODO handle the exception
				}
			},
			async getSupplyList() {
				try {
					let {
						data
					} = await getTypeApi();
					this.supplyList = data.list;
				} catch (e) {
					//TODO handle the exception
				}
			},
			//为你推荐
			toYou(params) {
				let {
					data
				} = this.filedSx(this.dataform);
				return RecommendToYou({
					...params,
					userMatch: {
						...data,
						businessForm: data.businessForm ? data.businessForm.join(',') : data.businessForm
					}
				})
			},
			//附近推荐
			async getNearbyList(index) {
				console.log("---index", index)
                 let data = [];
				let parmas = {
					limit: 4,
					page: this.nearPage,
					city: this.$city,
					storeCategory: this.detailInfo.storeCategory
				}

				try {

					if (index == 0) {
						let d = await this.toYou(parmas);
						data = d.data
						console.log("jjhhhhh", data)
					}

					if (index == 1) {
						parmas = {
							...parmas,
							latitude: this.dataform.latitude,
							longitude:  this.dataform.longitudewp
						}
						let d = await getRecommend(parmas);
						data = d.data
					}

					let d = [];
					if (this.nearPage == 1) {
						d = data.list;
					} else {
						d = [...this.nearbyList, ...data.list];
					}
					this.nearbyList = d
					// this.nearbyList = d.filter(item => item.id != this.curId)
					console.log("this.nearbyList", this.nearbyList)
					this.totalNearPage = data.totalPage;
					this.loading = true;
					if (this.nearPage == data.totalPage && this.nearbyList.length > 0) this.loadTitle = '我也是有底线的'
					else if (this.nearPage < data.totalPage && this.nearbyList.length > 0) this.loadTitle = '加载更多'
					else this.loadTitle = '暂无数据'
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			toCollect(status) {
				// this.isLove = status;
				// //console.log('status',status)
				let that = this;
				let d = {
					status,
					type: 1,
					uid: that.dataform.uid,
					id: that.dataform.id
				}
				if (status) {
					d.title = that.dataform.title
				}
				getApp().globalData.toCollect(d, (res) => {
					that.existsIsLove(res.id);
				})

				if (this.bhv.indexOf(3) == -1) {
					this.bhv.push(3)
				}


			},
			existsIsLove(id) {
				let that = this;
				getApp().globalData.existsIsLove({
					id,
					type: 1
				}).then(res => {
					that.isLove = res;
				})
			},
			toReport() {
				this.$refs.report.open();
			},
			// toShare() {
			// 	getApp().globalData.share();
			// }
		}
	}
</script>

<style lang="scss" scoped>
	@import "../static/css/index.scss";

	/deep/ .u-cell__body {
		height: 105rpx;
		/* 设置你想要的高度 */
		line-height: 100rpx;
		/* 调整行高以垂直居中文字 */
		background-color: #fff;
	}

	.scroll-Y {
		padding-top: 120rpx;
		height: calc(100vh - 190rpx);
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		line-height: 40rpx;
		text-align: left;
		padding: 10rpx 30rpx;
		font-size: 30rpx;
	}

	.zblIST .info {
		font-size: 22rpx;
		color: #ccc;
	}

	.files-list {
		.file {
			padding: 24rpx 0;
			position: relative;
			border-bottom: 1px solid rgba(238, 238, 238, 1);

			.name {
				width: 50%;
				margin-left: 24rpx;
				font-size: 28rpx;
				letter-spacing: 0px;
				line-height: 44rpx;
				color: rgba(0, 0, 0, 0.9);
			}

			.down-icon {
				position: absolute;
				right: 30rpx;
				top: 50%;
				margin-top: -18rpx;
				width: 36rpx;
				height: 36rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.file-icon {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.house-status {
		.house {
			width: 43%;
			height: 140rpx;
			border-radius: 10rpx;
			background: rgba(247, 247, 247, 1);
		}

		.house-name {
			margin: 0 auto;
			display: inline-block;
			padding-right: 24rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(238, 33, 45, 1);
			position: relative;

			&::after {
				content: '';
				display: block;
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -5rpx;
				width: 10rpx;
				height: 10rpx;
				border-top: 1px solid rgba(238, 33, 45, 1);
				border-right: 1px solid rgba(238, 33, 45, 1);
				transform: rotate(45deg);
			}
		}

		.rent-status {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(166, 166, 166, 1);

			text {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
				padding: 0 12rpx;
			}

			.rent {
				text-align: right;
			}

			.sell {
				text-align: left;
			}

			.line {
				padding: 0 12rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);
			}
		}
	}

	.project-recommend {
		padding: 30rpx 28rpx;

		.project~.project {
			margin-top: 24rpx;
		}

		.project {
			padding: 30rpx;
			border-radius: 10px;
			background: rgba(255, 255, 255, 1);
			position: relative;

			.project-tag-gray {
				width: 70rpx;
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				font-size: 22rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);
				border-radius: 4rpx;
				background: rgba(242, 242, 242, 1);
				position: absolute;
				right: 28rpx;
				top: 30rpx
			}

			.img {
				width: 216rpx;
				height: 202rpx;
				border-radius: 10rpx;
				position: relative;
				background: #e3e3e3;

				image {
					width: 216rpx;
					height: 202rpx;
				}

				.distance {
					padding: 12rpx;
					width: 100%;
					position: absolute;
					bottom: 0;
					left: 0;
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					line-height: 42rpx;

					image {
						width: 14rpx;
						height: 16rpx;
					}
				}
			}

			.info {
				width: calc(100% - 230rpx);
				height: 202rpx;
				margin-left: 12rpx;

				.name {
					width: 260rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 1);
				}

				.address {
					padding: 0;
					width: 100%;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(125, 125, 125, 1);
				}

				.sell-now {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 36rpx;
					color: rgba(125, 125, 125, 1);
				}

				.sell-status {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(196, 196, 196, 1);
				}

				.red-price {
					min-width: 40%;
					font-size: 30rpx;
					font-weight: 700;
					color: rgba(238, 33, 45, 1);

					text {
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);
					}
				}

				.gray-price {
					min-width: 40%;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(125, 125, 125, 1);

					text {
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(125, 125, 125, 1);
					}

				}

				.house {
					.tag {
						width: 58rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
						border-radius: 4rpx;
						background: rgba(238, 33, 45, 1);
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
					}
				}

				.shop {
					.tag {
						width: 58rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
						border-radius: 4rpx;
						background: rgba(242, 242, 242, 1);
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(125, 125, 125, 1);
					}
				}
			}
		}
	}
</style>